<!-- 评论区组件 -->
<template>
  <view v-if="showComment" class="comment-container">
    <!-- 评论区遮罩 -->
    <view
      class="comment-mask"
      @click="hideComment"
      :class="{ 'comment-mask-visible': commentAnimation === 'enter' }"
    ></view>

    <!-- 评论区内容 -->
    <view
      class="comment-content"
      :class="{
        'comment-enter': commentAnimation === 'enter',
        'comment-leave': commentAnimation === 'leave',
        'comment-transition': true,
      }"
    >
      <!-- 评论区头部 -->
      <view class="comment-header">
        <view class="comment-title">评论 ({{ getCommentCount() }})</view>
        <view class="comment-close" @click="hideComment">
          <uni-icons type="close" size="30" color="#666"></uni-icons>
        </view>
      </view>

      <!-- 评论列表 -->
      <view class="comment-list">
        <view
          v-if="getComments().length === 0"
          class="no-comment"
        >
          暂无评论，快来抢沙发吧~
        </view>

        <view
          class="comment-item"
          v-for="(comment, index) in getComments()"
          :key="index"
        >
          <view class="comment-avatar">
            <uni-icons type="person" size="50" color="#ccc"></uni-icons>
          </view>
          <view class="comment-info">
            <view class="comment-user">{{ comment.userName }}</view>
            <view class="comment-text">{{ comment.content }}</view>
            <view class="comment-time">{{ comment.time }}</view>
          </view>
        </view>
      </view>

      <!-- 评论输入框 -->
      <view class="comment-input-area">
        <input
          type="text"
          class="comment-input"
          placeholder="写下你的评论..."
          v-model="newCommentContent"
          @confirm="submitComment"
        />
        <button class="comment-submit" @click="submitComment">发送</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch } from "vue";

// 接收父组件传递的 props
const props = defineProps({
  showComment: {
    type: Boolean,
    default: false,
  },
  commentData: {
    type: Object,
    default: () => ({ list: [] }),
  },
  currentCommentMusicId: {
    type: Number,
    default: null,
  },
});

// 定义 emits 事件
const emits = defineEmits(["hideCommentEvent"]);

// 评论动画状态
const commentAnimation = ref("");
// 新评论内容
const newCommentContent = ref("");

// 监听评论区显示状态变化，触发动画
watch(() => props.showComment, (newVal) => {
  if (newVal) {
    // 显示评论区时添加进入动画
    setTimeout(() => {
      commentAnimation.value = "enter";
    }, 10);
  } else {
    // 隐藏评论区时添加离开动画
    commentAnimation.value = "leave";
    // 动画结束后清除状态
    setTimeout(() => {
      commentAnimation.value = "";
    }, 300);
  }
});

// 获取某个音乐的评论列表
const getComments = () => {
  const commentItem = props.commentData.list.find((item) => item.musicId === props.currentCommentMusicId);
  return commentItem ? commentItem.comments : [];
};

// 获取某个音乐的评论数量
const getCommentCount = () => {
  return getComments().length;
};

// 提交评论
const submitComment = () => {
  if (!newCommentContent.value.trim()) return;

  const newComment = {
    id: Date.now(),
    userName: "我",
    content: newCommentContent.value.trim(),
    time: formatTime(new Date()),
  };

  // 查找当前音乐的评论列表，没有则创建
  let commentItem = props.commentData.list.find(
    (item) => item.musicId === props.currentCommentMusicId
  );
  if (!commentItem) {
    commentItem = {
      musicId: props.currentCommentMusicId,
      comments: [],
    };
    props.commentData.list.push(commentItem);
  }

  // 添加新评论到列表最前面
  commentItem.comments.unshift(newComment);

  // 清空输入框
  newCommentContent.value = "";
};

// 格式化时间为 "YYYY-MM-DD HH:MM"
const formatTime = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 隐藏评论区
const hideComment = () => {
  emits("hideCommentEvent");
};
</script>

<style scoped lang="scss">
// 评论区样式 - 从底部向上滑出
.comment-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow: hidden;
}

// 评论区遮罩
.comment-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
}

.comment-mask-visible {
  background-color: rgba(0, 0, 0, 0.5);
}

// 评论区内容
.comment-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 80vh;
  background-color: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  transform: translateY(100%);
  box-shadow: 0 -2rpx 15rpx rgba(0, 0, 0, 0.1);
}

.comment-transition {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.comment-enter {
  transform: translateY(0);
}

.comment-leave {
  transform: translateY(100%);
}

// 评论区头部
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.comment-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.comment-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 评论列表
.comment-list {
  padding: 20rpx 30rpx;
  max-height: calc(80vh - 220rpx);
  overflow-y: auto;
  box-sizing: border-box;
}

.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-info {
  flex: 1;
}

.comment-user {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  line-height: 1.5;
}

.comment-time {
  font-size: 22rpx;
  color: #999;
}

// 无评论提示
.no-comment {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

// 评论输入区
.comment-input-area {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1px solid #f5f5f5;
  background-color: #fff;
}

.comment-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  border: 1px solid #eee;
  border-radius: 35rpx;
  font-size: 26rpx;
  background-color: #f9f9f9;
}

.comment-submit {
  width: 120rpx;
  height: 70rpx;
  margin-left: 20rpx;
  background-color: #3cc88c;
  color: #fff;
  border-radius: 35rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>